<template>
<view class="wrap">
	<swiper class="category" indicator-color="rgba(0,0,0,0)" indicator-active-color="rgba(0,0,0,0)" :circular="true" :style="{marginTop: source.margin + 'px', marginBottom: source.margin2 + 'px', height: height}"  @change="categoryChange">
		<swiper-item v-for="(v, i) in list" :key="i">
				<view :class="['line', { one: isOne }]" v-for="(item, idx) in v" :key="idx">
				<block v-for="(icon, index) in item" :key="index">
					<view class="slide" :style="{width: width}">
						<view class="item">
							<wx-auth :type="1" :link="icon"></wx-auth>
							<view :class="['icon', source.style.active]" :style="{backgroundImage: 'url('+ icon.url +')'}"></view>
							<view class="title" v-if="source.is_show_title" :style="{color: item.color}">{{ icon.title }}</view>
						</view>
					</view>
				</block>
			</view>
		</swiper-item>
	</swiper>		
</view>
</template>

<script>
	export default {
		props: {
			source: [Object]
		},
		data () {
			return {
				currentPageindex: 0
			}
		},
		methods: {
			categoryChange(event) {
				this.currentPageindex = event.detail.current;
			}			
		},
		computed: {
			list () {
				let arr = []
				let list = []
				for(let i = 0;i < this.source.img_list.length;i += this.source.column) {
					arr.push(this.source.img_list.slice(i, i + this.source.column))
				}
				for (let j = 0;j < arr.length; j += 2) {
					list.push(arr.slice(j, j + 2))
				}
				return list
			},
			width () {
				return  `${ 100 / this.source.column }%`
			},
			isOne () {
				return true
			},
			height () {
				if (this.source.column === 4) {
					if (this.list[0].length < 2) {
						if (this.source.is_show_title) {
							return `${uni.upx2px(200)}px`
						} else {
							return `${uni.upx2px(155)}px`
						}
					} else {
						if (this.source.is_show_title) {
							return `${uni.upx2px(425)}px` 
						} else {
							return `${uni.upx2px(360)}px`
						}						
					}
				} else {
					if (this.source.is_show_title) {
						if (this.list[0].length < 2) {
							return `${uni.upx2px(155)}px`
						} else {
							return `${uni.upx2px(360)}px`
						}
					} else {
						if (this.list[0].length < 2) {
							return `${uni.upx2px(105)}px`
						} else {
							return `${uni.upx2px(280)}px`
						}
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.wrap {
	overflow: hidden;
	position: relative;
	background-color:white;
	.category {
		.line {
			display: flex;
			margin-bottom: 15upx;
			&.one {
				justify-content: space-around
			}
			&:last-of-type {
				margin-bottom: 0;
			}
			.slide {
				.item {
					position: relative;
					text-align:center;
					padding: 0 25upx;
					.icon {
						.combackground(cover, center, center);
						width: 100%;
						margin: 0 auto;
						padding-top: 100%;
						border-radius: 0; 
						overflow: hidden;
						&.style-1 { border-radius: 50%; }				
					}
					.title {
						font-size: 26upx;
						padding-top: 10upx;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
</style>
